<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度地图学习</title>
    <!--添加这个移动端的自适应-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!--添加百度地图的浏览器的密钥-->
    <script src="http://api.map.baidu.com/api?v=2.0&ak=5PCFGIUCYfSubcLaKDdioCY4WyztACEr"></script>
    <style>
        html {
            height:100%;
        }
        body {
            height:100%;
            margin:0;
            padding:0;
        }
        #container {
            height:100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script  type="text/javascript">
    /*进行百度地图的初始化*/
    var map = new BMap.Map("container");          // 创建地图实例
//    var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
    var point = new BMap.Point(113.758652,34.734857);
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

//    添加控件

//    地图缩放平移
    map.addControl(new BMap.NavigationControl());
//    缩放地图控件
    map.addControl(new BMap.OverviewMapControl());
//    比例尺控件
    map.addControl(new BMap.ScaleControl());
//    卫星，三维图
    map.addControl(new BMap.MapTypeControl());
//    版本控件
//    map.addControl(new BMap.CopyrightControl());
//    定位控件
//    map.addControl(new BMap.MapGeolocationControl());
//    map.setCurrentCity("郑州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

    // 定义一个控件类，即function

//    第一步，创建一个控件的类，让它继承自control

    function ZoomControl(){
        // 设置默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new BMap.Size(50, 50);
    }
    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control();

//  第二步，给这个控件类中添加initialize方法，声明下这个控件的样式和行为

    // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
    // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
    ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
        var div = document.createElement("div");
// 添加文字说明
        div.appendChild(document.createTextNode("放大2级"));
        // 设置样式
        div.style.cursor = "pointer";
        div.style.border = "1px solid gray";
        div.style.backgroundColor = "white";
        // 绑定事件，点击一次放大两级
        div.onclick = function(e){
            map.zoomTo(map.getZoom() + 2);
        };
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    };

//    最后一步，实例化这个控件类，并且通过addControl方法添加到地图中去

    // 创建控件实例
    var myZoomCtrl = new ZoomControl();
    map.addControl(myZoomCtrl);

//    添加标注
    var marker = new BMap.Marker(point);        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中

//    给标注添加双击click事件
//    marker.addEventListener("click", function(){
//        alert("您点击了标注");
//    });

//    让标注变的可以拖拽
    marker.enableDragging();

//    拖拽的时候可以响应dragend事件
//    marker.addEventListener("dragend", function(e){
    //        alert("当前位置：" + e.point.lng + ", " + e.point.lat);
    //    });

//    添加信息窗口
//    这个窗口有最小值，宽250，高100
    var opts = {
        width : 50,     // 信息窗口宽度
        height: 50,     // 信息窗口高度
        title : "Hello"  // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

//    添加折线
    var polyline = new BMap.Polyline([
                new BMap.Point(113.727822, 34.732691),
                new BMap.Point(96.727822, 54.732691)
            ],
            {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.5}
    );
    map.addOverlay(polyline);

//  1.  自定义覆盖物类创建，这个类是继承overlay类的
    // 定义自定义覆盖物的构造函数
    function SquareOverlay(center, length, color){
        this._center = center;
        this._length = length;
        this._color = color;
    }
    // 继承API的BMap.Overlay
    SquareOverlay.prototype = new BMap.Overlay();

//    2. 给这个类添加initialize方法，初始化这个自定义的覆盖物
    // 实现初始化方法
    SquareOverlay.prototype.initialize = function(map){
// 保存map对象实例
        this._map = map;
        // 创建div元素，作为自定义覆盖物的容器
        var div = document.createElement("div");
        div.style.position = "absolute";
        // 可以根据参数设置元素外观
        div.style.width = this._length + "px";
        div.style.height = this._length + "px";
        div.style.background = this._color;
// 将div添加到覆盖物容器中
        map.getPanes().markerPane.appendChild(div);
// 保存div实例
        this._div = div;
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
        return div;
    }


//    3.将这个覆盖物添加到指定的位置上去
    // 实现绘制方法
    SquareOverlay.prototype.draw = function(){
// 根据地理坐标转换为像素坐标，并设置给容器
        var position = this._map.pointToOverlayPixel(this._center);
        this._div.style.left = position.x - this._length / 2 + "px";
        this._div.style.top = position.y - this._length / 2 + "px";
    };


    //    4，直接添加覆盖物
    //    添加自定义覆盖物

//    var mySquare = new SquareOverlay(map.getCenter(), 50, "red");
//    map.addOverlay(mySquare);

//    marker.addEventListener("dragend", function(e){
//        alert("当前位置：" + e.point.lng + ", " + e.point.lat);
//    });

    map.addEventListener("click", function(e){

        var point = new BMap.Point(e.point.lng,e.point.lat);
        var marker = new BMap.Marker(point);// 创建标注

        map.addOverlay(marker);
    });

</script>